﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>统计首页</title>
    <link href="__ASSETS__/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />

    <script src="__ASSETS__/js/ace-extra.min.js"></script>
    <style>
        .user_statistics_div .infobox{
            margin-bottom: 30px;
        }
    </style>
</head>
<body style="background-color:white">
    <div id="body">
        <div class="space-6"></div>

        <div class="col-sm-5 infobox-container">
            <div class="user_statistics_div" style="width: 100%;margin: 5px auto;">

            <div class="infobox infobox-green  ">
                <div class="infobox-icon">
                    <i class="icon-comments"></i>
                </div>

                <div class="infobox-data">
                    <span class="infobox-data-number">{{data.new_user_num}}</span>
                    <div class="infobox-content">本周新用户</div>
                </div>
                <template v-if="data.user_rate_type == 'up' || data.user_rate_type == 'eq'">
                    <div class="badge badge-success">
                        {{data.user_rate}}
                        <i class="icon-arrow-up"></i>
                    </div>
                </template>
                <template v-else-if="data.user_rate_type == 'down'">
                    <div class="badge badge-success" style="color: red;">
                        {{data.user_rate}}
                        <i  class="icon-arrow-down"></i>
                    </div>
                </template>
            </div>

            <div class="infobox infobox-blue">
                <div class="infobox-icon">
                    <i class="icon-twitter"></i>
                </div>

                <div class="infobox-data">
                    <span class="infobox-data-number">{{data.new_supplier_num}}</span>
                    <div class="infobox-content">本周新商家</div>
                </div>

                <template v-if="data.supplier_rate_type == 'up' || data.supplier_rate_type == 'eq'">
                    <div class="badge badge-success">
                        {{data.supplier_rate}}
                        <i class="icon-arrow-up"></i>
                    </div>
                </template>
                <template v-else>
                    <div class="badge badge-success" style="color: red;">
                        {{data.supplier_rate}}
                        <i  class="icon-arrow-down"></i>
                    </div>
                </template>
            </div>
            </br>
            <!--<div class="infobox infobox-pink  ">
                <div class="infobox-icon">
                    <i class="icon-shopping-cart"></i>
                </div>

                <div class="infobox-data">
                    <span class="infobox-data-number">8</span>
                    <div class="infobox-content">新订单</div>
                </div>
                <div class="stat stat-important">4%</div>
            </div>-->
            <div class="infobox infobox-red  ">
                <div class="infobox-icon">
                    <i class="icon-beaker"></i>
                </div>

                <div class="infobox-data">
                    <span class="infobox-data-number">{{data.user_num}}</span>
                    <div class="infobox-content">当前用户</div>
                </div>
            </div>

            <div class="infobox infobox-orange2  ">
                <!--<div class="infobox-chart">-->
                    <!--<span class="sparkline" data-values="196,128,202,177,154,94,100,170,224"></span>-->
                <!--</div>-->
                <div class="infobox-icon">
                    <i class="icon-twitter"></i>
                </div>
                <div class="infobox-data">
                    <span class="infobox-data-number">{{data.supplier_num}}</span>
                    <div class="infobox-content">当前商家</div>
                </div>
            </div>
                </br>
            <!--<div class="infobox infobox-blue2  ">
                <div class="infobox-progress">
                    <div class="easy-pie-chart percentage" data-percent="42" data-size="46">
                        <span class="percent">42</span>%
                    </div>
                </div>

                <div class="infobox-data">
                    <span class="infobox-text">交易使用</span>

                    <div class="infobox-content">
                        <span class="bigger-110">~</span>
                        剩余58GB
                    </div>
                </div>
            </div>-->

            <div class="space-6"></div>

            <!--<div class="infobox infobox-green infobox-small infobox-dark">
                <div class="infobox-progress">
                    <div class="easy-pie-chart percentage" data-percent="61" data-size="39">
                        <span class="percent">61</span>%
                    </div>
                </div>

                <div class="infobox-data">
                    <div class="infobox-content">任务</div>
                    <div class="infobox-content">完成</div>
                </div>
            </div>-->

            <div class="infobox infobox-blue infobox-small infobox-dark">
                <!--<div class="infobox-chart">-->
                    <!--<span class="sparkline" data-values="3,4,2,3,4,4,2,2"></span>-->
                <!--</div>-->
                <div class="infobox-icon">
                    <i class="icon-pause"></i>
                </div>
                <div class="infobox-data">
                    <div class="infobox-content">进行中订单</div>
                    <div class="infobox-content">{{data.order_num}}</div>
                </div>
            </div>

            <div class="infobox infobox-grey infobox-small infobox-dark">
                <div class="infobox-icon">
                    <i class="icon-stop"></i>
                </div>

                <div class="infobox-data">
                    <div class="infobox-content">已完成订单</div>
                    <div class="infobox-content">{{data.success_order_num}}</div>
                </div>
            </div>
            </div>
        </div>

        <div class="vspace-sm"></div>

        <div class="col-sm-5">
            <div class="widget-box">
                <div class="widget-header widget-header-flat widget-header-small">
                    <h5>
                        <i class="icon-signal"></i>
                        商品统计
                    </h5>

                    <!--<div class="widget-toolbar no-border">
                        <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                            本周
                            <i class="icon-angle-down icon-on-right bigger-110"></i>
                        </button>

                        <ul class="dropdown-menu pull-right dropdown-125 dropdown-lighter dropdown-caret">
                            <li class="active">
                                <a href="#" class="blue">
                                    <i class="icon-caret-right bigger-110">&nbsp;</i>
                                    本周
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                                    上周
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                                    本月
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <i class="icon-caret-right bigger-110 invisible">&nbsp;</i>
                                    上月
                                </a>
                            </li>
                        </ul>
                    </div>-->
                </div>

                <div class="widget-body">
                    <div class="widget-main">
                        <div id="piechart-placeholder"></div>

                        <div class="hr hr8 hr-double"></div>

                        <div class="clearfix">
                            <div class="grid2">
                                <span class="grey">
                                    <i class="icon-facebook-sign icon-2x blue"></i>
                                    &nbsp; 在售商品
                                </span>
                                <h4 class="bigger pull-right">{{data.zs_pro_count}}</h4>
                            </div>

                            <div class="grid2">
                                <span class="grey">
                                    <i class="icon-twitter-sign icon-2x purple"></i>
                                    &nbsp; 待上架商品
                                </span>
                                <h4 class="bigger pull-right">{{data.dsj_pro_count}}</h4>
                            </div>

                            <!--<div class="grid3">
                                <span class="grey">
                                    <i class="icon-pinterest-sign icon-2x red"></i>
                                    &nbsp; pins
                                </span>
                                <h4 class="bigger pull-right">1,050</h4>
                            </div>-->
                        </div>
                    </div><!-- /widget-main -->
                </div><!-- /widget-body -->
            </div><!-- /widget-box -->
        </div><!-- /span -->
    </div><!-- /row -->

    <script src="__ASSETS__\js\jquery-2.0.3.min.js"></script>

    <!-- <![endif]-->
    <!--[if IE]>
    <script src="__ASSETS__\js\jquery-1.10.2.min.js"></script>
    <![endif]-->
    <!--[if !IE]> -->

    <script type="text/javascript">
        window.jQuery || document.write("<script src='__ASSETS__/js/jquery-2.0.3.min.js'>" + "<" + "script>");
    </script>

    <!-- <![endif]-->
    <!--[if IE]>
    <script type="text/javascript">
     window.jQuery || document.write("<script src='__ASSETS__/js/jquery-1.10.2.min.js'>"+"<"+"script>");
    </script>
    <![endif]-->

    <script type="text/javascript">
        if ("ontouchend" in document) document.write("<script src='__ASSETS__/js/jquery.mobile.custom.min.js'>" + "<" + "script>");
    </script>
    <script src="__ASSETS__/js/bootstrap.min.js"></script>
    <script src="__ASSETS__/js/typeahead-bs2.min.js"></script>

    <!-- page specific plugin scripts -->
    <!--[if lte IE 8]>
      <script src="__ASSETS__/js/excanvas.min.js"></script>
    <![endif]-->

    <script src="__ASSETS__/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="__ASSETS__/js/jquery.ui.touch-punch.min.js"></script>
    <script src="__ASSETS__/js/jquery.slimscroll.min.js"></script>
    <script src="__ASSETS__/js/jquery.easy-pie-chart.min.js"></script>
    <script src="__ASSETS__/js/jquery.sparkline.min.js"></script>
    <script src="__ASSETS__/js/flot/jquery.flot.min.js"></script>
    <script src="__ASSETS__/js/flot/jquery.flot.pie.min.js"></script>
    <script src="__ASSETS__/js/flot/jquery.flot.resize.min.js"></script>

    <!-- ace scripts -->

    <script src="__ASSETS__/js/ace-elements.min.js"></script>
    <script src="__ASSETS__/js/ace.min.js"></script>
    <script rel="script" src="__JS__/supplies/vue.min.js"></script>
    <script rel="script" src="__JS__/vue-resource.js"></script>
    <!-- inline scripts related to this page -->

    <script type="text/javascript">
        var data = [];

        jQuery(function ($) {
            $('.easy-pie-chart.percentage').each(function () {
                var $box = $(this).closest('.infobox');
                var barColor = $(this).data('color') || (!$box.hasClass('infobox-dark') ? $box.css('color') : 'rgba(255,255,255,0.95)');
                var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2';
                var size = parseInt($(this).data('size')) || 50;
                $(this).easyPieChart({
                    barColor: barColor,
                    trackColor: trackColor,
                    scaleColor: false,
                    lineCap: 'butt',
                    lineWidth: parseInt(size / 10),
                    animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000,
                    size: size
                });
            });
            $('.sparkline').each(function () {
                var $box = $(this).closest('.infobox');
                var barColor = !$box.hasClass('infobox-dark') ? $box.css('color') : '#FFF';
                $(this).sparkline('html', { tagValuesAttribute: 'data-values', type: 'bar', barColor: barColor, chartRangeMin: $(this).data('min') || 0 });
            });

            var vm = new Vue( {
                el : "#body" ,
                data : {
                    data : {},
                },
                created : function () {
                    var url = "{:url('admin/Statistics/statistics')}";
                    this.$http.get(url).then(function (data) {
                        var json = data.body;
                        this.data = json.data;
                        data = json.data.type_pro_info;
                        var placeholder = $('#piechart-placeholder').css({ 'width': '90%', 'min-height': '400px' });
                        var data = data;
//            [
//              { label: "social networks", data: 38.7 },
//              { label: "search engines", data: 24.5 },
//              { label: "ad campaigns", data: 8.2 },
//              { label: "direct traffic", data: 18.6 },
//              { label: "other", data: 10 }
//            ];
                        function drawPieChart(placeholder, data, position) {
                            $.plot(placeholder, data, {
                                series: {
                                    pie: {
                                        show: true,
                                        tilt: 1,
                                        highlight: {
                                            opacity: 0.25
                                        },
                                        stroke: {
                                            color: '#fff',
                                            width: 2
                                        },
                                        startAngle: 2,
                                    }
                                },
                                legend: {
                                    show: true,
                                    position: position || "ne",
                                    labelBoxBorderColor: null,
                                    margin: [-30, 15]
                                }
                                ,
                                grid: {
                                    hoverable: true,
                                    clickable: true
                                }
                            })
                        }
                        drawPieChart(placeholder, data);

                        /**
                         we saved the drawing function and the data to redraw with different position later when switching to RTL mode dynamically
                         so that's not needed actually.
                         */
                        placeholder.data('chart', data);
                        placeholder.data('draw', drawPieChart);
                    })
                },
                methods : {

                }
            } );

        });
    </script>
</body>
</html>